<template>
<div>
  <el-form-item label="参考答案" prop="answer">
    <el-radio-group v-model="answer">
      <el-radio v-for="(option) in subject.options" :label="option.optionName" :key="option.optionName">{{ option.optionName }}</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="题目名称"  prop="subjectName">
    <tinymce v-model="subjectName" />
  </el-form-item>
</div> 
</template>

<script>
import tinymce from '@/components/tinymce'
export default {
  name: 'Choices',
  components:{
    tinymce
  },
  props: {
    subjectName: {
      type: String,
      default: ''
    },
    subject: {
      type: Object,
      default: function () {
        return {
          id: '',
          examinationId: undefined,
          subjectName: '',
          type: 0,
          choicesType: 0,
          options: [
            { subjectChoicesId: '', optionName: 'A', optionContent: '' },
            { subjectChoicesId: '', optionName: 'B', optionContent: '' },
            { subjectChoicesId: '', optionName: 'C', optionContent: '' },
            { subjectChoicesId: '', optionName: 'D', optionContent: '' }
          ],
          answer: {
            subjectId: '',
            answer: '',
            answerType: '',
            score: ''
          },
          score: 5,
          analysis: '',
          level: 2,
          editType: 0 // 0: 输入框，1：富文本
        }
      }
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>
